{% include "../common/_app_css.html" %}
<div class="layui-fluid" id="app">
    <div class="layui-card">
        <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOut">
            <div class="layui-form layui-card-header" v-show="showSearch">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item label="名称">
                        <el-input v-model="queryForm.username" class="app-query-input" size="small" placeholder="请输入名称" @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch">查询</el-button>
                        <el-button size="small" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <div class="layui-card-body">
            <div class="app-table-action">
                <div class="app-table-btn">
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="addNew">新增</el-button>
                    {#<el-button size="small" type="danger" plain icon="el-icon-delete" @click="onBatchDelete">删除</el-button>#}
                </div>
                <div class="app-table-action-right">
                    <app.table-tool-bar :show-search.sync="showSearch" @query-table="getList" :columns="columns"></app.table-tool-bar>
                </div>
            </div>
            <div class="app-table-container">
                <el-table :data="tableData" stripe style="width: 100%" v-loading="tableLoading" @selection-change="handleSelectionChange">
                    <el-table-column prop="id" label="序号" width="65"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="120"></el-table-column>
                    <el-table-column prop="nickname" label="昵称"></el-table-column>
                    <el-table-column prop="email" label="Email"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column label="状态" width="120">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status == 1" @change="(v) => handleStatusChange(v, scope.row)" active-color="#13ce66"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="update_time" label="更新时间" width="200"></el-table-column>

                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button size="mini" class="app-edit-btn" type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button size="mini" class="app-del-btn" type="text" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <template slot="empty" style="height: 100px;">
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
            </div>
            <div class="app-table-page">
                <div class="app-table-page-info"></div>
                <app.pagination v-show="total > 0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.limit" @pagination="getList" />
            </div>

            {% include "./edit.html" %}

        </div>
    </div>
</div>
{% include "../common/_app_js.html" %}
{% block importJs %}
    <script src="/public/common/js/tinymce4.7.5/tinymce.min.js"></script>
{% endblock %}
{% include "../components/tinymce.html" %}
{% include "../components/table-tool-bar.html" %}
{% include "../components/pagination.html" %}
<script>
    var vm = app.vue({
        el: '#app',
        data() {
            return {
                showSearch: true,
                dialogStatus: '',
                editVisible: false,
                tableLoading: false,
                // 查询参数
                queryForm: {
                    username: '',
                    page: 1,
                    limit: 10,
                },
                titleMap: {
                    update: '修改',
                    create: '新增'
                },
                modelForm: {
                    author: 'admin',
                    username: '',
                    status: 1,
                },
                rules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                    ],
                    nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                },
                columns: [],
                multipleSelection: [],
                rowSelection: [],
                tableData: [],
                dialogImageUrl: '',
                dialogVisible: false,
                total: 0,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            addNew() {
                this.editVisible = true
                this.dialogStatus = 'create'
            },
            getList() {
                this.tableLoading = true
                app.request({
                    method: 'get',
                    url: 'users/list',
                    params: this.queryForm,
                }).then((res) => {
                    this.tableData = res?.data?.rows
                    this.total = res?.data?.total

                    setTimeout(() => {
                        this.tableLoading = false
                    }, 80)
                })
            },
            onSearch: _.debounce(() => {
                vm.queryForm.page = 1
                vm.getList()
            }, 500),
            onReset: _.debounce(() => {
                vm.queryForm = {}
                vm.queryForm.page = 1
                vm.getList()
            }, 500),
            async handleEdit(index, row) {
                this.editVisible = true
                this.dialogStatus = 'update'
                this.modelForm = row
                // this.modelForm.status = '1'
            },
            refreshData(msg = '操作') {
                this.getList()
                this.$notify({
                    message: `${msg}成功`,
                    type: 'success',
                    duration: 3000
                })
            },
            handleDelete(index, row) {
                this.onDelete(row.id)
            },
            onBatchDelete() {
                const ids = this.rowSelection.map(item => item.id)

                if (!ids?.length) {
                    this.$message.error('至少选择一项')
                    return
                }

                this.$confirm('你确定要删除选中项吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    this.onDelete(ids)
                })
            },
            onDelete(id) {
                this.dialogStatus = 'delete'

                app.request({
                    method: 'post',
                    url: 'user/delete',
                    data: app.stringify({ id })
                }).then((res) => {
                    !res?.code && this.refreshData()
                })
            },
            handleStatusChange: _.debounce((v, row) => {
                let text = row.status === 1 ? '保存草稿' : '发布'

                vm.$confirm('确认要 『 ' + text + ' 』 吗？', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    vm.onStatusChange(row)
                })
            }, 200),
            onStatusChange(row) {
                this.modelForm = app.deepClone(row)
                this.modelForm.status = row.status === 1 ? 2 : 1
                row.status = row.status === 1

                this.onUpdate()
            },
            createData() {
                this.$refs.modelForm.validate(valid => {
                    if (valid) {
                        app.request({
                            method: 'post',
                            url: 'user/insert',
                            data: this.modelForm,
                        }).then(() => {
                            this.editVisible = false
                            this.handleClose()
                            this.onSearch()

                            this.$notify({
                                title: 'Success',
                                message: '新增成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            updateData() {
                this.$refs.modelForm.validate(valid => {
                    if (valid) {
                        this.onUpdate()
                    }
                })
            },
            onUpdate() {
                app.request({
                    method: 'put',
                    url: 'user/update',
                    data: this.modelForm,
                }).then(() => {
                    this.editVisible = false
                    this.handleClose()
                    this.onSearch()

                    this.$notify({
                        title: 'Success',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCancel() {
                this.editVisible = false
                this.handleClose()
            },
            handleClose(done) {
                this.$refs.modelForm && this.$refs.modelForm.resetFields()
                this.$set(this, 'modelForm', this.$options.data().modelForm)
                done && done()
            },
            handleRemove (file, fileList) {
            },
            handleUploadSuccess (response, file, fileList) {
                if (response && response.data) {
                    this.modelForm.avatar = '/' + response.data.path
                }
            },
            handleImgPreview (file) {
                this.dialogVisible = true
            },
            clearUploadFiles () {
                this.$refs.upload.clearFiles()
            },
            handleDelImg () {
                this.modelForm.avatar = ''
            }
        }
    })
</script>
